<%--
  Created by IntelliJ IDEA.
  User: Al Sah-him
  Date: 2018/7/5
  Time: 11:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/global.jsp" %>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=0, user-scalable=0">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<html>
<head>
    <jsp:include page="../common/include.jsp"/>
    <title>关于我们</title>
    <style>
        p {
            margin: 0;
            padding: 0;
        }

        .banner {
            background-color: #142F55;
            height: 600px;
            width: 100%;
            background-size: cover;
        }

        .commonBg {
            width: 100%;
            background: #091a2E;
        }

        .title {
            font-size: 34px;
            text-align: center;
            color:rgba(255,255,255,1);
            line-height:30px;
            letter-spacing: 1px;
            padding-top: 70px;
        }

        .enTitle {
            font-size: 16px;
            color:rgba(136,146,153,1);
            padding: 20px 0 20px 0;
            text-align: center;
        }

        .line {
            width: 50px;
            height: 2px;
            background: -webkit-linear-gradient(left, #11343E, #2AD1FD, #11343E);
            background: -o-linear-gradient(left, #11343E, #2AD1FD, #11343E);
            background: -moz-linear-gradient(left, #11343E, #2AD1FD, #11343E);
            background: linear-gradient(left, #11343E, #2AD1FD, #11343E);
            border-radius: 1px;
            margin: 0 auto;
        }

        .content {
            width: 1190px;
            text-align: center;
            margin: 0px auto;
            border-bottom: 1px solid rgba(18, 42, 68, 1);
        }

        /* 原 因 */
        .cause {
            height: 236px;
        }
        .cause .content {
            height: 236px;
        }
        .cause .cont {
            width:622px;
            height:46px;
            font-size:16px;
            line-height:30px;
            margin: 0px auto;
        }

        /* 技术亮点 */
        .technical {
            height: 487px;
        }
        .technical .content {
            height: 487px;
        }
        .technical .cont {
            float: left;
            width: 210px;
            height: 270px;
            margin-top: 50px;
            margin-left: 70px;
            text-align: center;
        }
        .technical .cont .cont_img {
            width: 66px;
            height: 66px;
            margin-bottom: 24px;
        }
        .technical .cont .cont_p {
            font-size:24px;
            color:rgba(255,255,255,1);
            line-height:30px;
            margin-bottom: 19px;
        }
        .technical .cont .cont_t {
            font-size:20px;
            color:rgba(132,164,211,1);
            line-height:30px;
        }

        /* 我们的服务 */
        .ourService {
            height: 741px;
        }
        .ourService .content {
            height: 741px;
        }
        .ourService .cont {
            margin-top: 50px;
        }

        /* 服务宗旨 */
        .serviceTenet {
            height: 407px;
        }
        .serviceTenet .content {
            height: 407px;
        }
        .serviceTenet .cont {
            position: relative;
            height: 88px;
            margin-top: 50px;
        }
        .serviceTenet .cont .cont_t {
            position: absolute;
            top: 110px;
            font-weight: 100!important;
            font-size:20px;
            color:rgba(255,255,255,1);
            line-height:20px;
        }
        .joint_l {
            width: 48px;
            height: 1px;
            background: -webkit-linear-gradient(left, #0A1A31, #0A1B2F, #0088AC);
            background: -o-linear-gradient(left, #0A1A31, #0A1B2F, #0088AC);
            background: -moz-linear-gradient(left, #0A1A31, #0A1B2F, #0088AC);
            background: linear-gradient(left, #0A1A31, #0A1B2F, #0088AC);
            border-radius: 1px;
        }
        .joint_c {
            width: 140px;
            height: 1px;
            background: -webkit-linear-gradient(left, #0A1A31, #0A1B2F,#0088AC, #0088AC, #0088AC,#0A1B2F, #0A1A31);
            background: -o-linear-gradient(left, #0A1A31, #0A1B2F,#0088AC, #0088AC, #0088AC,#0A1B2F, #0A1A31);
            background: -moz-linear-gradient(left, #0A1A31, #0A1B2F,#0088AC, #0088AC, #0088AC,#0A1B2F, #0A1A31);
            background: linear-gradient(left, #0A1A31, #0A1B2F,#0088AC, #0088AC, #0088AC,#0A1B2F, #0A1A31);
            border-radius: 1px;
            text-align: center;
            position: relative;
            top: 2px;
        }
        .yuan {
            display: inline-block;
            position: relative;
            top: -3px;
            width: 8px;
            height: 8px;
            background:rgba(42,208,255,1);
            border-radius: 5px;
        }
        .joint_r {
            width: 48px;
            height: 1px;
            background: -webkit-linear-gradient(left, #0088AC, #0A1B2F, #0A1A31);
            background: -o-linear-gradient(left, #0088AC, #0A1B2F, #0A1A31);
            background: -moz-linear-gradient(left, #0088AC, #0A1B2F, #0A1A31);
            background: linear-gradient(left, #0088AC, #0A1B2F, #0A1A31);
            border-radius: 1px;
        }


        /* 资讯 */
        .information {
            height: 662px;
        }
        .information .content {
            height: 662px;
        }
        .information .tab_page {
            width: 100%;
            height: 42px;
            margin-top: 30px;
            text-align: center;
        }
        .information .tab_page .tab_btn {
            width:180px;
            height:40px;
            color: #fff;
            font-size:18px;
            line-height:30px;
            text-align: center;
            background: #05152C;
            border: 1px solid #2AD1FD;
            border-radius:2px;
        }
        .information .pitch {
            background: #2AD1FD!important;
        }
        .information .cont {
            width: 100%;
        }
        .information .cont .cont_t {

        }

        /* 联系我们 */
        .contactUs {
            height: 463px;
            padding-top: 56px;
        }
        .contactUs .content {
            height: 371px;
            margin-top: 14px;
            border-bottom: none;
        }
        .contact_bg {
            width: 100%;
            height: 371px;
            background-image: url("${frontPath}/images/aboutUs/lxwm_bg.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .contactUs .content .cont {
            width: 1000px;
            height: 323px;
            background:rgba(18,49,84,1);
            border-radius:4px;
            margin: 0 auto;
            padding: 40px 30px;
        }
        .contactUs .cont .cont_l {
            float: left;
            width: 490px;

        }
        .contactUs .cont .cont_r {
            float: left;
            margin-left: 90px;

        }
        /* 合作意向 */
        .contactUs .cont_txt {
            text-align: left;
            font-size:24px;
            color:rgba(255,255,255,1);
            line-height:30px;
        }
        .contactUs .companyName {
            margin-left: 0px!important;
            margin-top: 20px;
            width:490px;
            height:36px;
            background:rgba(255,255,255,1);
            border-radius:4px;
            border: 1px solid #FFFFFF;
        }
        .contactUs .telAndName {
            float: left;
            margin-top: 10px;
            width:240px;
            height:36px;
            background:rgba(255,255,255,1);
            border-radius:4px;
            border: 1px solid #FFFFFF;
        }
        .contactUs .checkBox {
            clear: both;
            padding-top: 10px;
        }
        .contactUs .checkBox .dx {
            text-align: left;
            padding: 0;
            width: 114px;
            height: 20px;
            display: inline-block;
            cursor: pointer;
            font-weight: 100 !important;
        }
        /* 全选功能样式  */
        .contactUs input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            outline: none;
            display: none
        }

        .contactUs .checkBox .dx input[type="checkbox"]+span {
            width: 12px;
            height: 12px;
            display: inline-block;
            background-image: url("${frontPath}/images/aboutUs/checkBox.png");
            background-repeat: no-repeat;
            background-position: 0 0;
        }

        .contactUs .checkBox .dx input[type="checkbox"]:checked+span {
            background-position: 0 -33px
        }
        .contactUs .checkBox input {
            margin: 0;
            position: relative;
            left: -10px;
            top: 2px;
        }
        .contactUs .submit {
            width:490px;
            height:36px;

            font-size:14px;
            color: rgba(255,255,255,1);
            background:rgba(42,209,253,1);
            border-radius:4px;
            border: 1px solid rgba(42,209,253,1);
        }
        .contactUs .cont_span {
            font-size:14px;
            color:rgba(255,255,255,1);
            line-height:30px
        }
        /* 联系我们 */
        .contactUs .cont_r {
            text-align: left;
        }
        .contactUs .icon {
            width: 20px;
            height: 20px;
            margin: 15px auto 0px auto;
        }

    </style>
</head>
<body>
    <jsp:include page="layout/head.jsp"/>
    <div class="banner"></div>
    <%-- 原因 --%>
    <div class="commonBg cause">
        <div class="content">
            <p class="title">为什么要成为尚远信息的合作伙伴</p>
            <div class="cont enTitle">
                致力于为您提供先进的技术、优质的服务和丰富的产品选择，以最高效的创新解决方案
                与服务满足您的业务需求
            </div>
        </div>
    </div>
    <%-- 技术亮点 --%>
    <div class="commonBg technical">
        <div class="content">
            <p class="title">技术亮点</p>
            <p class="enTitle">TECHNICAL HIGHLIGHTS</p>
            <p class="line"></p>
            <div class="cont">
                <img class="cont_img" src="${frontPath}/images/aboutUs/yd5h.png" />
                <p class="cont_p">移动5核</p>
                <p class="cont_t">构建从0到N的网站全生命周期服一站式完成打造网站运营价值闭环</p>
            </div>
            <div class="cont">
                <img class="cont_img" src="${frontPath}/images/aboutUs/lsdz.png" />
                <p class="cont_p">量身定制</p>
                <p class="cont_t">智慧需求与“对”的设计师联合出品舒适的网站一次采购到位</p>
            </div>
            <div class="cont">
                <img class="cont_img" src="${frontPath}/images/aboutUs/zqcy.png" />
                <p class="cont_p">追求创意</p>
                <p class="cont_t">喜欢的创意一定要去追求，不同的创意带来不同的精彩</p>
            </div>
            <div class="cont">
                <img class="cont_img" src="${frontPath}/images/aboutUs/kqpz.png" />
                <p class="cont_p">苛求品质</p>
                <p class="cont_t">追求的卓越品质，领先行业水平，崇尚科技创新，只为卓越的你。</p>
            </div>
        </div>
    </div>
    <%-- 我们的服务 --%>
    <div class="commonBg ourService">
        <div class="content">
            <p class="title">我们的服务</p>
            <p class="enTitle">OUR SERVICE</p>
            <p class="line"></p>
            <div class="cont">
                <img src="${frontPath}/images/aboutUs/ourServices.png">
            </div>
        </div>
    </div>
    <%-- 服务宗旨 --%>
    <div class="commonBg serviceTenet">
        <div class="content">
            <p class="title">服务宗旨</p>
            <p class="enTitle">SERVICE TENET</p>
            <p class="line"></p>
            <div class="cont">
                <label class="joint_r"></label>
                <img src="${frontPath}/images/aboutUs/ltkhxy.png" width="88px">
                <label class="cont_t" style="margin-left: -130px;">认真聆听客户需要</label>
                <label class="joint_c"><span class="yuan"></span></label>
                <img src="${frontPath}/images/aboutUs/czkhjz.png" width="88px">
                <label class="cont_t" style="margin-left: -125px;">努力创造客户价值</label>
                <label class="joint_c"><span class="yuan"></span></label>
                <img src="${frontPath}/images/aboutUs/zsyhty.png" width="88px">
                <label class="cont_t" style="margin-left: -105px;">重视用户体验</label>
                <label class="joint_c"><span class="yuan"></span></label>
                <img src="${frontPath}/images/aboutUs/lswzyh.png" width="88px">
                <label class="cont_t" style="margin-left: -106px;">落实网站优化</label>
                <label class="joint_c"><span class="yuan"></span></label>
                <img src="${frontPath}/images/aboutUs/czgdpz.png" width="88px">
                <label class="cont_t" style="margin-left: -125px;">用心创造高端品质</label>
                <label class="joint_l"></label>
            </div>
        </div>
    </div>
    <%-- 资讯 --%>
    <div class="commonBg information">
        <div class="content">
            <p class="title">资讯</p>
            <p class="enTitle">INFORMATION</p>
            <p class="line"></p>
            <div class="tab_page">
                <input type="button" class="tab_btn pitch" value="企业资讯"/>
                <input type="button" class="tab_btn" style="margin-left: 20px;" value="行业资讯" />
            </div>
            <div class="cont">
                <div class="cont_t">

                </div>
                <div class="cont_t">

                </div>
                <div class="cont_t">

                </div>
            </div>
        </div>
    </div>
    <%-- 联系我们 --%>
    <div class="commonBg contactUs">
        <div class="contact_bg">
            <div class="content">
                <div class="cont">
                    <div class="cont_l">
                        <p class="cont_txt">合作意向  <span class="enTitle">COOPERATION INTENTION</span></p>
                        <input type="text" class="companyName" name="companyName" placeholder="公司名称" />
                        <div>
                            <input type="text" class="telAndName" name="Name" placeholder="姓名"/>
                            <input type="text" class="telAndName" name="tel" placeholder="电话" style="margin-left: 10px;"/>
                        </div>
                        <div class="checkBox">
                            <label class="dx">
                                <input type="checkbox" name="intention" /><span></span>
                                <span class="cont_span">微信平台</span>
                            </label>
                            <label class="dx">
                                <input type="checkbox" name="intention" /><span></span>
                                <span class="cont_span">H5订制</span>
                            </label>
                            <label class="dx">
                                <input type="checkbox" name="intention" /><span></span>
                                <span class="cont_span">APP开发</span>
                            </label>
                            <label class="dx">
                                <input type="checkbox" name="intention" /><span></span>
                                <span class="cont_span">AR/VR订制</span>
                            </label>
                            <label class="dx">
                                <input type="checkbox" name="intention" /><span></span>
                                <span class="cont_span">网站建设</span>
                            </label>
                            <label class="dx">
                                <input type="checkbox" name="intention" /><span></span>
                                <span class="cont_span">小程序</span>
                            </label>
                            <label class="dx">
                                <input type="checkbox" name="intention" /><span></span>
                                <span class="cont_span">营销策划</span>
                            </label>
                            <label class="dx">
                                <input type="checkbox" name="intention" /><span></span>
                                <span class="cont_span">其他需求</span>
                            </label>
                        </div>
                        <input type="button" class="submit" name="submit" value="提交需求" />
                    </div>
                    <div class="cont_r">
                        <p class="cont_txt">联系我们  <span class="enTitle">CONTACT US</span></p>
                        <label class="icon">
                            <img src="${frontPath}/images/aboutUs/tel.png" />
                        </label>
                        <span class="cont_span">  联系电话：0510-85105181</span></br>
                        <label class="icon">
                            <img src="${frontPath}/images/aboutUs/mobile.png" />
                        </label>
                        <span class="cont_span">  手机号码：18961788967</span></br>
                        <label class="icon">
                            <img src="${frontPath}/images/aboutUs/QQ.png" />
                        </label>
                        <span class="cont_span"> QQ：1059681242</span></br>
                        <label class="icon">
                            <img src="${frontPath}/images/aboutUs/email.png" />
                        </label>
                        <span class="cont_span">  邮箱：haoljq@163.com</span></br>
                        <label class="icon">
                            <img src="${frontPath}/images/aboutUs/address.png" />
                        </label>
                        <span class="cont_span">  地址：南京市江宁区悠谷双子楼9号楼904</span>
                    </div>
                </div>
           </div>
       </div>
    </div>

    <jsp:include page="layout/foot.jsp"/>
</body>
<script>
    $(function () {

    });
</script>
</html>
